<template>
  <a-modal v-model="visible" :mask-closable="false" width="40%" title="配置参数" :dialog-style="{ top: '20px' }" :footer="null">
    <div v-if="visible" v-permission="['app:set-channel']" v-loading="loading">
      <a-form-model ref="form" :label-col="{span: 6}" :wrapper-col="{span: 16}" :model="formData" :rules="rules">
        <a-form-model-item label="是否开通" prop="_available">
          <a-switch v-model="formData._available" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item v-for="item in templateParams" :key="item.paramKey" :label="item.paramName" :prop="item.paramKey">
          <a-input v-model="formData[item.paramKey]" />
        </a-form-model-item>
        <div class="form-modal-footer">
          <a-space>
            <a-button type="primary" :loading="loading" html-type="submit" @click="submit">保存</a-button>
            <a-button :loading="loading" @click="closeDialog">取消</a-button>
          </a-space>
        </div>
      </a-form-model>
    </div>
  </a-modal>
</template>
<script>

export default {
  components: {
  },
  props: {
    appId: {
      type: String,
      required: true
    },
    channelId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 是否可见
      visible: false,
      // 是否显示加载框
      loading: false,
      // 表单数据
      formData: {},
      templateParams: [],
      // 表单校验规则
      rules: {}
    }
  },
  computed: {
  },
  created() {
    // 初始化表单数据
    this.initFormData()
  },
  methods: {
    // 打开对话框 由父页面触发
    openDialog() {
      this.visible = true

      this.$nextTick(() => this.open())
    },
    // 关闭对话框
    closeDialog() {
      this.visible = false
      this.$emit('close')
    },
    // 初始化表单数据
    initFormData() {
      this.formData = {
        _available: false
      }
      this.templateParams = []
      this.rules = {
        _available: [
          { required: true, message: '请选择是否开通' }
        ]
      }
    },
    // 提交表单事件
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const channelParams = {}
          this.templateParams.forEach(item => {
            channelParams[item.paramKey] = this.formData[item.paramKey]
          })

          const params = {
            appId: this.appId,
            channelId: this.channelId,
            params: JSON.stringify(channelParams),
            available: this.formData._available
          }
          this.loading = true
          this.$api.appChannel.setParams(params).then(() => {
            this.$msg.success('配置成功！')
            this.$emit('confirm')
            this.visible = false
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    // 页面显示时触发
    open() {
      // 初始化表单数据
      this.initFormData()

      this.loadData()
    },
    loadData() {
      this.loading = true
      this.$api.appChannel.getParams({
        appId: this.appId,
        channelId: this.channelId
      }).then(res => {
        const params = JSON.parse(res.params)
        params._available = res.available
        this.formData = params
        this.templateParams = JSON.parse(res.templateParams)
        this.templateParams.filter(item => item.isRequired).forEach(item => {
          this.rules[item.paramKey] = [
            { required: true, message: '请输入' + item.paramName }
          ]
        })
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
